<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Web Desktop</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
<!-- 首页页面加载进度条 -->
<div id="J-progress-bar" class="progress-bar">
    <div class="progress-bar-num">0%</div>
    <div class="progress-bar-bg"></div>
</div>
<div class="warp" id="J-warp">
    <!-- 头部 -->
    <div class="web-top">
        <!-- 桌面切换 -->
        <div class="desktop-warp">
            <ul class="desktop-switching" id="J-desktop-switching">
                <li class="desktop-hover">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
                <!-- 头像 -->
            <span class="head-portrait"></span>
        </div>
        <!-- 天气预报 -->
        <div class="weather">
            <p>今天：多云转晴<span>21℃~35℃</span></p>
            <p>明天：晴转小雨转中雨<span>21℃~35℃</span></p>
            <span class="dividing-line"></span>
            <em class="city-name">山西太原</em>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div class="side" id="J-side">
        <div class="side-pic">
            <img src="image/shop.png" alt />
            <img src="image/disk.png" alt />
            <img src="image/qq.png" alt />
            <img src="image/q.png" alt />
            <img src="image/qqweibo.png" alt />
            <img src="image/email.png" alt />
        </div>
        <div class="side-system">
            <div class="side-dividing-line"></div>
            <img src="image/Input-method.png" alt />
            <img src="image/Sound.png" alt />
        </div>
        <div class="side-system">
            <div class="side-dividing-line"></div>
            <img src="image/Set-up.png" alt />
            <img src="image/Theme.png" alt />
        </div>
        <div class="side-system">
            <div class="side-dividing-line"></div>
            <img class="side-q" src="image/q+.png" alt />
        </div>
    </div>
    <!-- 桌面内容 -->
    <div class="desktop" id="J-desktop">
        <div class="desktop-box">
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>JavaScript</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>Html</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>StyleSheet</p>
            </div>
            <div class="desktop-header">
                <img src="image/iTunes.png" alt>
                <p>音乐</p>
            </div>
        </div>
        <div class="desktop-box">
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>jQuery</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>jQuery UI</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>jQuery Mobile</p>
            </div>
            <div class="desktop-header">
                <img src="image/iTunes.png" alt>
                <p>music</p>
            </div>
        </div>
        <div class="desktop-box">
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>高级程序</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>HtmlCss</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>H5+C3+Js</p>
            </div>
            <div class="desktop-header">
                <img src="image/iTunes.png" alt>
                <p>音乐</p>
            </div>
        </div>
        <div class="desktop-box">
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>JavaScript</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>Html</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>StyleSheet</p>
            </div>
            <div class="desktop-header">
                <img src="image/iTunes.png" alt>
                <p>音乐</p>
            </div>
        </div>
        <div class="desktop-box">
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>JavaScript</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>Html</p>
            </div>
            <div class="desktop-header">
                <img src="image/image-bg/Folder-empty.png" alt>
                <p>StyleSheet</p>
            </div>
            <div class="desktop-header">
                <img src="image/iTunes.png" alt>
                <p>音乐</p>
            </div>
        </div>
    </div>
    <!-- 个人信息 -->
    <div id="J-people-info" class="personal-profile">
        <div class="personal-data">个人信息</div>
        <div class="personal-work">工作经历</div>
        <div class="personal-skill">技能专长</div>
        <div class="personal-experience">工作经验</div>
        <div class="personal-close" id="J-personal-close">X</div>
    </div>
    <!-- 个人信息logo -->
    <div id="J-people-info-min" class="personal-profile-min">
        <div class="personal-data-min"><p>个</p></div>
        <div class="personal-work-min"><p>人</p></div>
        <div class="personal-skill-min"><p>资</p></div>
        <div class="personal-experience-min"><p>料</p></div>
    </div>
    <!-- 右键菜单 -->
    <div class="right-click-menu" id="J-right-click-menu">
        <a class="right-click-menu-hover" href="javascript:;">新建 >></a>
        <a href="javascript:;">重新加载</a>
        <a href="javascript:;">排列方式</a>
        <a href="javascript:;">上传文件</a>
        <a href="javascript:;">自定义桌面背景</a>
    </div>
    <!-- 时钟 -->
    <div class="clock" id="J-clock">
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
        <img src="image/time-img/0.JPG" alt />
    </div>
</div>
<script src="js/index-api.js"></script>
<script src="js/index.js"></script>
</body>
</html>